<template>
  <!-- 精简评论 -->
  <view class="comment-limt-container" v-if="!isShowComment">
    <view class="comment-title">精简评论</view>
    <block v-for="(item, index) in commentList.slice(0, 2)" :key="index">
      <!-- ITEM组件 -->
      <article-comment-item :data="item.info"></article-comment-item>
    </block>
    <!-- 查看更多 -->
    <view class="show-more" @click="onMoreClick">查看更多评论</view>
  </view>
  <!-- 全部评论 -->
  <view class="comment-all-container" v-else>
    <mescroll-body
      ref="mescrollRef"
      @init="mescrollInit"
      @up="upCallback"
      :down="{
        use: false,
      }"
    >
      <view class="comment-title">全部评论</view>
      <block v-for="(item, index) in commentList" :key="index">
        <!-- ITEM组件 -->
        <article-comment-item :data="item.info"></article-comment-item>
      </block>
    </mescroll-body>
  </view>
</template>

<script>
import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
import { getArticleCommentList } from "api/article";
export default {
  mixins: [MescrollMixin],
  name: "article-comment-list",
  props: {
    // 文章 ID
    articleId: {
      type: String,
      required: true,
    },
  },
  data() {
    return {
      // 当前页数
      page: 1,
      // 每页评论数
      pageSize: 5,
      // 评论列表
      commentList: [],
      // 是否展示全部
      isShowComment: false,
      // 是否init
      isInit: true,
      // 组件实例
      mescroll: null,
      // 评论总数
      commentListTotal: 0,
    };
  },
  created() {
    this.loadCommentList();
  },
  mounted() {},
  methods: {
    /**
     * 为 commentList增加评论
     */
    addCommentList(data) {
      this.commentList.unshift(data);
    },

    async mescrollInit() {
      await this.loadCommentList();
      this.isInit = false;
      // 结束上拉加载
      this.getMescroll().endSuccess();
      // 判断数据是否加载完成
      this.mescroll.endBySize(this.commentList.length, this.commentListTotal);
    },
    async upCallback() {
      if (this.isInit) return;
      this.page += 1;
      await this.loadCommentList();
      // 结束上拉加载
      this.getMescroll().endSuccess();
      // 判断数据是否加载完成
      this.mescroll.endBySize(this.commentList.length, this.commentListTotal);
    },
    /**
     * 全部评论的点击事件
     */
    onMoreClick() {
      this.isShowComment = true;
    },
    /**
     * 获取评论列表
     */
    async loadCommentList() {
      const { data: res } = await getArticleCommentList({
        articleId: this.articleId,
        page: this.page,
        size: this.pageSize,
      });
      // 评论总数
      this.commentListTotal = res.count;
      // 判断是首次加载还是加载更多
      if (this.page === 1) {
        this.commentList = res.list;
      } else {
        this.commentList = [...this.commentList, ...res.list];
      }
    },
    /**
     * 返回mescroll实例对象
     */
    getMescroll() {
      if (!this.mescroll) {
        this.mescroll = this.$refs.mescrollRef.mescroll;
      }
      return this.mescroll;
    },
  },
};
</script>

<style lang="scss" scoped>
.comment-limt-container {
  .comment-title {
    font-weight: bold;
    color: #333;
    font-size: $uni-font-size-lg;
    margin: 12px 0;
  }

  .show-more {
    color: #5d83a8;
    font-size: $uni-font-size-base;
    margin: 12px;
    text-align: center;
  }
}
</style>
